<template>
  <div class="login">
    <div class="login-form">
      <header>
        <h1>
          欢迎<span class="login-text">{{ isLogin ? "登录" : "注册" }}</span>
        </h1>
        <div class="registe-text" @click="changeLogin">
          {{ !isLogin ? "登录" : "注册" }}
        </div>
      </header>
      <div class="form-input">
        <label for="username">账号：</label>
        <input
          v-model="userInfo.username"
          id="username"
          type="text"
          name="username"
          class="input"
          placeholder="Type here..."
        />
      </div>
      <div class="form-input">
        <label for="password">密码：</label>
        <input
          v-model="passwordFake"
          id="password"
          type="password"
          name="password"
          class="input"
          placeholder="Type here..."
        />
      </div>
      <el-checkbox v-model="remember" label="记住密码" size="large" />
      <div class="login-btn">
        <button @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
// @ is an alias to /src
import { ref, reactive } from "vue";
import store from "@/utils/store.js";
import { md5 } from "@/utils/md5.js";
import { menuTree } from "@/utils/menuTree.js";
import api from "@/api/user/login";
import { useRouter } from "vue-router";
const router = useRouter();
let remember = ref(true);
let isMD5 = ref(true);
let isLogin = ref(true);
let passwordFake = ref("");

let userInfo = reactive({
  username: "",
  password: "",
});

function rememberUser() {
  if (remember.value) {
    store.set("userInfo", userInfo);
  } else {
    store.clear("userInfo");
  }
}

async function login() {
  userInfo.password = isMD5.value
    ? md5(passwordFake.value + process.env.md5Salt)
    : passwordFake.value;
  try {
    let res = await api.userLogin(userInfo);
    let menu = menuTree(res.data.menu);
    store.set("token", res.data.token);
    store.set("menu", menu);
    rememberUser();
    setTimeout(() => {
      router.push({ name: "home" });
    }, 500);
  } catch (error) {
    console.log(error);
  }
}
function autoInfo() {
  const params = store.get("userInfo");
  if (params) {
    userInfo = params;
    passwordFake.value = params.password;
    isMD5.value = false;
  }
}
autoInfo();

function changeLogin() {
  isLogin.value = !isLogin.value;
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/login-bc.webp") no-repeat;
  background-size: cover;
  position: relative;
  .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 400px;
    border-radius: 50px;
    background: rgba(224, 224, 224, 0.7);
    box-shadow: -20px 20px 60px rgba(190, 190, 190, 0.9),
      20px -20px 60px rgba(255, 255, 255, 0.9);
    header {
      margin-bottom: 50px;
      position: relative;
      user-select: none;
      .login-text {
        cursor: pointer;
      }
      .registe-text {
        position: absolute;
        right: 0;
        top: 5px;
        font-weight: bold;
        background-color: rgba(255, 233, 193, 0.61);
        border-radius: 7px 13px 0 7px;
        padding: 7px 20px;
        cursor: pointer;
      }
    }
    .form-input {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      label {
        margin-right: 20px;
        color: #2c3e50;
        font-weight: bold;
        letter-spacing: 5px;
        cursor: pointer;
      }
      .input {
        border: none;
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 20px 20px 60px #c5c5c5, -20px -20px 60px #e9e9e9;
        transition: 0.3s;
      }

      .input:focus {
        outline-color: #e8e8e8;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: inset 20px 20px 60px #c5c5c5, inset -20px -20px 60px #ffffff;
        transition: 0.3s;
      }
    }
    .login-btn {
      display: inline-block;
      margin-top: 50px;
      button {
        cursor: pointer;
        width: 150px;
        height: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: inherit;
        font-size: 16px;
        line-height: 53px;
        font-weight: bold;
        text-transform: uppercase;
        color: #2c3e50;
        background-color: rgba(189, 199, 207, 0.4);
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        border-color: rgba(255, 255, 255, 0.333);
        border-radius: 40px 40px 40px 40px;
        padding: 16px 24px 16px 28px;
        transform: translate(0px, 0px) rotate(0deg);
        transition: 0.2s;
        box-shadow: -4px -2px 16px 0px #eeeeee,
          4px 2px 16px 0px rgb(95 157 231 / 48%);
      }

      button:hover {
        color: #516d91;
        background-color: #e5edf5;
        box-shadow: -2px -1px 8px 0px #ffffff,
          2px 1px 8px 0px rgb(95 157 231 / 48%);
      }

      button:active {
        box-shadow: none;
      }
    }
  }
}
</style>
